<template>
    <el-container>
        <el-header>
            欢迎：{{username}}
            <el-button @click="quit">退出</el-button>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu
                    default-active="1"
                    class="el-menu-vertical-demo"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                    <el-menu-item index="1">
                        <i class="el-icon-menu"></i>
                        <router-link slot="title" to="/main/music" tag="span">音乐列表</router-link>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <router-link slot="title" to="/main/my" tag="span">我的</router-link>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    data(){
        return{
            username:localStorage.getItem('username')
        }
    },
    methods:{
        //退出
        quit(){
            //1.清除本地存储 removeItem
            //2.跳到登录界面

            localStorage.clear();  //清空所有的本地存储
            this.$router.push('/login');
        }
    }
}
</script>

<style lang="scss">
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }
    
    .el-aside {
        background-color: #D3DCE6;
        color: #333;
    }
    
    .el-main {
        background-color: #E9EEF3;
        color: #333;
    }
    
    .el-container {
        width:100%;
        height: 100%;
        overflow: hidden;
    }
</style>